<template>
	<view class="material-item">
		<view class="material-item-col" style="width: 200rpx">
			<text class="material-item-col-text">
				{{ item.material_name }}
			</text>
		</view>
		<view class="material-item-col" style="width: 150rpx">
			<text class="material-item-col-text">
				{{ item.number }}
			</text>
		</view>
		<view class="material-item-col" style="width: 120rpx">
			<text class="material-item-col-text">
				{{ item.specifications }}
			</text>
		</view>
		<view class="material-item-col" style="width: 100rpx">
			<text class="material-item-col-text">
				{{ item.nums }}
			</text>
		</view>
		<view class="material-item-col" style="width: 180rpx">
			<text class="material-item-col-btn" @click="selectCabinet()">{{ selectCabinetText(item) }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'select-material-item',
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		index: {
			type: Number,
			default: ''
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		selectCabinetText(item) {
			if (item.work_id) {
				if (item.already_num >= item.opnum) {
					return '已完成';
				} else {
					return '选货道';
				}
			} else {
				return '选货道';
			}
		},
		selectCabinet() {
			this.$emit('selectCabinet', this.item);
		}
	},
	destroyed() {
		// console.log('组件销毁');
	}
};
</script>

<style lang="scss">
/* select-material-item 组件样式 */
.material-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;
}

.material-item-col {
  text-align: center;
  overflow: hidden;
  padding: 0 10rpx;
}

.material-item-col-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 第一列（名称）特殊处理 */
.material-item-col:first-child {
  text-align: left;
  padding-left: 20rpx;
}

/* 操作按钮样式 */
.material-item-col-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  color: #fff;
  background-color: #333847;
  border-radius: 30rpx;
  line-height: 1.4;
}

/* 不同状态的按钮样式 */
.material-item-col-btn.selected {
  background-color: #999;
}

.material-item-col-btn.warning {
  background-color: #fa5151;
}

/* 响应式调整 */
@media (max-width: 600rpx) {
  .material-item-col-text {
    font-size: 24rpx;
  }
  
  .material-item-col-btn {
    padding: 6rpx 16rpx;
    font-size: 22rpx;
  }
}
</style>
